<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 网页信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>工具——HASH</title>
    <meta name="author" content="尘跃" />
    <meta name="description" content="工具——HASH" />

    <!-- Facebook Open Graph -->
    <meta property="og:site_name" content="" />
    <meta property="og:title" content="工具——HASH" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://cyue.net/pages/tool/hash.html" />
    <meta property="og:image" content="http://cyue.net/favicon.png" />
    <meta property="工具——HASH" />

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:image" content="http://cyue.net/favicon.png" />
    <meta name="twitter:title" content="工具——HASH" />
    <meta name="twitter:description" content="工具——HASH" />
    <meta name="twitter:creator" content="@尘跃" />
    <meta name="twitter:site" content="@cyue.net" />

    <!-- style -->
    <link rel="stylesheet/less" type="text/css" href="/css/style.less">
    <!-- less -->
    <script src="/js/third/less.min.js"></script>

    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>
    <!-- website configuration -->
    <script src="/js/configuration.js"></script>
    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>

    <style>
        #app {
            box-sizing: border-box;
            padding: 2em;
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 40rem) {
            #app {
                padding: 2rem 4rem;
            }
        }

        h1 {
            margin-bottom: 0.5em;
        }

        label {
            margin-top: 0.25em;
            margin-right: 0.25em;
        }

        input,
        textarea {
            box-sizing: border-box;
            padding: 0.5em;
            margin-top: 0.25em;
        }

        textarea {
            transition: all 50ms;
            width: 16rem;
            height: 10rem;
        }

        /*  */
        #form {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            margin-top: 0.5em;
            flex-wrap: wrap;
        }

        main img {
            margin: 1em;
            width: 80%;
        }

        form .button {
            background-color: transparent;
            min-width: 5em;
            width: fit-content;
            margin: 0.5em 1em;
        }

        output {
            display: inline-block;
            max-width: 75vw;
        }
    </style>
</head>
<body>
    <page-header></page-header>

    <div class="block-spacer"></div>
    <main id="app">
        <h1>HASH</h1>
        <form id="form">
            <div>
                <label>
                    输出类型
                    <select name="输出类型" v-model="outputType">
                        <option value="16">十六进制</option>
                        <option value="base64">Base64</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    大写字母
                    <input type="checkbox" name="大写字母" v-model="ifUpperCase">
                </label>
            </div>
            <div>
                <label>
                    HMAC
                    <input type="checkbox" name="HMAC" v-model="ifHMAC">
                </label>
            </div>

            <div v-if="ifHMAC">
                <label>
                    密钥
                    <br/>
                    <textarea v-model="key"></textarea>
                </label>
            </div>
            <div>
                <label>
                    输入
                    <br/>
                    <textarea v-model="input"></textarea>
                </label>
            </div>

            <div>
                <label>
                    MD5值
                    <br/>
                    <output>{{ md5Value }}</output>
                </label>
            </div>
            <div>
                <label>
                    SHA1值
                    <br />
                    <output>{{ sha1Value }}</output>
                </label>
            </div>
            <div>
                <label>
                    SHA256值
                    <br />
                    <output>{{ sha256Value }}</output>
                </label>
            </div>
            <div>
                <label>
                    SHA512值
                    <br />
                    <output>{{ sha512Value }}</output>
                </label>
            </div>
        </form>
    </main>

    <page-footer></page-footer>

    <!-- web component -->
    <script src="/js/component.js"></script>
    <!-- style -->
    <script src="/js/style.js"></script>
    <!-- sha -->
    <script src="/js/third/crypto-js.min.js"></script>
    <!--  -->
    <script>
        const { createApp } = Vue;
        createApp({
            mounted() {

            },

            data() {
                return {
                    outputType: "16",
                    ifUpperCase: false,
                    ifHMAC: false,
                    key: "",
                    input: "",
                    md5Value: "",
                    sha1Value: "",
                    sha256Value: "",
                    sha512Value: "",
                }
            },

            watch: {
                outputType(newV) {
                    if (newV === "base64") {
                        this.output2Base64();
                    } else {
                        this.hash();
                    }
                },
                ifUpperCase(newV) {
                    if (this.outputType === "base64") {
                        return;
                    }
                    if (newV) {
                        this.output2UpperCase();
                    } else {
                        this.output2LowerCase();
                    }
                },
                ifHMAC() {
                    this.hash();
                },
                key() {
                    this.hash();
                },
                input(newV) {
                    this.hash();
                },
            },

            methods: {
                output2Base64() {
                    this.md5Value = window.btoa(this.md5Value);
                    this.sha1Value = window.btoa(this.sha1Value);
                    this.sha256Value = window.btoa(this.sha256Value);
                    this.sha512Value = window.btoa(this.sha512Value);
                },
                output2UpperCase() {
                    this.md5Value = this.md5Value.toString().toUpperCase();
                    this.sha1Value = this.sha1Value.toString().toUpperCase();
                    this.sha256Value = this.sha256Value.toString().toUpperCase();
                    this.sha512Value = this.sha512Value.toString().toUpperCase();
                },
                output2LowerCase() {
                    this.md5Value = this.md5Value.toString().toLowerCase();
                    this.sha1Value = this.sha1Value.toString().toLowerCase();
                    this.sha256Value = this.sha256Value.toString().toLowerCase();
                    this.sha512Value = this.sha512Value.toString().toLowerCase();
                },

                hash() {
                    if (this.ifHMAC) {
                        this.md5Value = CryptoJS.HmacMD5(this.input, this.key);
                        this.sha1Value = CryptoJS.HmacSHA1(this.input, this.key);
                        this.sha256Value = CryptoJS.HmacSHA256(this.input, this.key);
                        this.sha512Value = CryptoJS.HmacSHA512(this.input, this.key);
                    } else {
                        this.md5Value = CryptoJS.MD5(this.input);
                        this.sha1Value = CryptoJS.SHA1(this.input);
                        this.sha256Value = CryptoJS.SHA256(this.input);
                        this.sha512Value = CryptoJS.SHA512(this.input);
                    }

                    if (this.outputType === "base64") {
                        this.output2Base64();
                        return;
                    }
                    if (this.ifUpperCase) {
                        this.output2UpperCase();
                    }
                }
            }
        }).mount("#app");
    </script>
</body>

</html>

